<template>
<div class="pdf" v-show="fileType === 'pdf'">
    <p class="arrow" style="text-align:center">
    <!-- // 上一页 -->
    <span style="cursor:pointer"  @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
    {{currentPage}} / {{pageCount}}
    <!-- // 下一页 -->
    <span  style="cursor:pointer"  @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
    </p>
       <!-- <ul class="footers">
            <li :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">
                <p>放大</p>
            </li>
            <li :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">
                <p>缩小</p>
            </li>
            <li :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
                <p>上一页</p>
            </li>
            <li :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
                <p>下一页</p>
            </li>
        </ul> -->
    <!-- // 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了 -->
    <pdf
       ref="wrapper" 
       :src="pdfSrc"
      :page="currentPage"
      @num-pages="pageCount=$event"
      @page-loaded="currentPage=$event"
      @loaded="loadPdfHandler" >
    </pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
  export default {
     name: 'vuepdf',
    metaInfo: {
      title: 'This is the test',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width,initial-scale=100,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
      ]
    },
        components: {pdf},
        // props: ['pdfSrc'],
    data () {
      return {
          scale: 100, //放大系数
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        fileType: 'pdf', // 文件类型
　　　　 pdfSrc:'',
// url:  require('../../../static/pdf/EHP Group A-test.pdf'), // pdf文件地址
      }
    },
　　created() {
　　　// 有时PDF文件地址会出现跨域的情况,这里最好处理一下
// this.url='https://ynujly.hxxdib.com/eroute/L0-L20191129-QVX6E.pdf';



//  pdf.cMapPacked= true
// console.log("---------------------------------------"+this.pdfSrc);
    },
    mounted(){
      var self=this;
      // this.pdfSrc= pdf.createLoadingTask(sessionStorage.getItem('pdfurl'));
      　　　  var loadingTask = pdf.createLoadingTask(sessionStorage.getItem('pdfurl'))
loadingTask.then(pdf => {
  console.log('页数：'+pdf.numPages)
          self.pdfSrc = loadingTask
          self.pageCount = pdf.numPages
          self.$refs.wrapper.$el.style.width =    "100%";

        }).catch((err) => {
       self.$toast('pdf加载失败'+err)
      })
    },
    methods: {
          //放大
            scaleD() {
                this.scale += 5;
                // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
                this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
            },

            //缩小
            scaleX() {
                // if(this.scale == 100) {
                //     return;
                // }
                this.scale += -5;
                this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
                // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
            },
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      }
    }
  }
  </script>

  <style lang="scss" scoped>
//  .pdf-box {
//     -webkit-box-sizing: border-box;
//     box-sizing: border-box;
//     max-width: 1024px;
//     width: 100%;
//     margin: 0 auto;
//     overflow-x: hidden;
//     height: 100%;
//     overflow-y: auto;
//     -webkit-overflow-scrolling: touch;
//     font-size: .28rem;
//     span {
//       width: 100%;
//     }
//   }
</style>